<template>
	<div style="width: 700px; ">
		<!-- 第一次填写用户信息弹窗 -->
		<!-- <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
			<el-form :model="userInfo">
				<el-form-item label="昵称">
					<el-input v-model="userInfo.monicker"></el-input>
				</el-form-item>
				<el-form-item label="身高(cm)">
					<el-input v-model="userInfo.height"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="userInfo.gender">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="生日">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="userInfo.birthday" style="width: 100%;">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="城市">
					<el-input v-model="userInfo.city"></el-input>
				</el-form-item>
				<el-form-item label="收入水平">
					<el-input v-model="userInfo.income"></el-input>
		 	</el-form-item>
				<el-form-item label="最高学历">
					<el-input v-model="userInfo.education"></el-input>
				</el-form-item>
				<el-form-item label="是否单身">
					<el-radio-group v-model="userInfo.marriage">
						<el-radio label="是"></el-radio>
						<el-radio label="否"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="电话号码">
		 		<el-input v-model="userInfo.phone"></el-input>
				</el-form-item>
				<el-form-item label="个性签名">
					<el-input type="textarea" v-model="userInfo.signature"></el-input>
				</el-form-item>
		 </el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog> -->
		<div style="width: 500px; margin-left: 300px;">
			<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size='100'>
			</el-avatar>
			<el-form ref="form" :model="userInfo" label-width="80px" :disabled='formShow'>
				<el-form-item label="昵称">
					<el-input v-model="userInfo.monicker"></el-input>
				</el-form-item>
				<el-form-item label="身高(cm)">
					<el-input v-model="userInfo.height"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="userInfo.gender">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="生日">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="userInfo.birthday" style="width: 100%;">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="城市">
					<el-input v-model="userInfo.city"></el-input>
				</el-form-item>
				<el-form-item label="收入水平">
					<el-input v-model="userInfo.income"></el-input>
				</el-form-item>
				<el-form-item label="最高学历">
					<el-input v-model="userInfo.education"></el-input>
				</el-form-item>
				<el-form-item label="是否单身">
					<el-radio-group v-model="userInfo.marriage">
						<el-radio label="是"></el-radio>
						<el-radio label="否"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="电话号码">
					<el-input v-model="userInfo.phone"></el-input>
				</el-form-item>
				<el-form-item label="个性签名">
					<el-input type="textarea" v-model="userInfo.signature"></el-input>
				</el-form-item>
				<el-form-item size="large">
					<el-button type="primary" @click="updateUserInfo" :disabled='editShow'>编辑</el-button>
					<el-button type="primary" @click="onSubmit" :disabled='submitShow'>提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					userId:1,
					monicker: '',
					height: '',
					gender: '',
					birthday: '',
					city: '',
					industry: '',
					income: '',
					education: '',
					marriage: '',
					signature: '',
					phone: ''
				},
				//编辑按钮是否禁用
				editShow: false,
				//提交按钮是否禁用
				submitShow: true,
				//表单是否禁用
				formShow: true,
				//存在域中的userId
				// userId: this.GLOBAL.userId,
				code: 200,
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
				this.editShow = false;
				this.submitShow = true;
				this.formShow = true;
				if(this.code == 200){
					this.axios.put("http://localhost:8080/our", this.userInfo).then(res => {
						if (res.data.code == 200) {
							//修改成功
							this.$message.success(res.data.msg);
						} else {
							//修改失败
							this.$message.warning(res.data.msg);
						}
					
						this.getList();
					})
				}else{
					this.addUserInfo();
				
				}
				
			},
			updateUserInfo() {
				this.editShow = true;
				this.submitShow = false;
				this.formShow = false;
			},
			getList() {
				this.axios.get("http://localhost:8080/our/" + 1).then(res => {
					console.log(res.data.msg);
					// this.userInfo = res.data.data;
					if (res.data.code == 200) {
						this.userInfo = res.data.data;
						this.code = 200;
					} else {
						this.code = 500;
						this.formShow = false;
						this.editShow = true;
						this.submitShow = false;
						this.$message.warning(res.data.msg);
					}

				})
			},
			addUserInfo() {
				this.axios.post("http://localhost:8080/our/" + 1, this.userInfo).then(res => {
					if (res.data.code == 200) {
						//添加成功
						this.$message.success(res.data.msg);
					} else {
						//添加失败
						this.$message.warning(res.data.msg);
					}

					this.getList();
				})
			}
		},
		created() {
			this.getList();
		},
	}
</script>

<style>
</style>
